<template>
    <div class="mar-t-20 mar-l-10 mar-r-10">
        <div class="flex">
            <div class="mar-r-15">
                <span class="font-14">课程名称：</span>
                <el-input v-model="screen.form.courseName" size="small" placeholder="请输入课程名称" style="width: 150px;"></el-input>
            </div>

            <div class="mar-r-15">
                <span class="font-14">讲课老师：</span>
                <el-input v-model="screen.form.teacher" size="small" placeholder="请输入课程名称" style="width: 150px;"></el-input>
            </div>

            <div class="mar-r-15">
                <span class="font-14">课程分类：</span>
                <el-select v-model="screen.form.classifyId" placeholder="请选择课程分类" size="small" clearable filterable>
                    <el-option v-for="(item, index) in screen.classifyList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </div>

            <el-button type="primary" size="small">搜 索</el-button>
        </div>

        <div class="mar-t-20">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="showUpdateCourse()">添加课程</el-button>
            <el-button type="warning" size="small" icon="el-icon-bottom" @click="batchOffShelf()">批量下架</el-button>
        </div>

        <el-table :data="tableData" ref="table" border class="w-100 mar-t-10" v-loading="tableLoading">
            <el-table-column fixed="left" type="selection" width="60" align="center"></el-table-column>

            <el-table-column label="banner图" width="150">
                <template slot-scope="props">
                    <div v-if="props.row.mainUrl !== null && props.row.mainUrl !== ''">
                        <img :src="props.row.mainUrl" class="w-90 mar-x-auto" />
                    </div>

                    <div v-else class="color-999999">暂无数据</div>
                </template>
            </el-table-column>

            <el-table-column label="课程名称" prop="courseName" width="280">
				<template slot-scope="props">
					<div>
						<div v-if="props.row.courseName !== null && props.row.courseName !== ''">
							<div v-if="props.row.courseName.length < 18">《&nbsp;{{props.row.courseName}}&nbsp;》</div>
							
							<div v-else>
								<el-tooltip class="item" effect="dark" :content="props.row.courseName" placement="top-start">
									<span>《&nbsp;{{props.row.courseName.substr(0, 18) + "..."}}</span>
								</el-tooltip>
							</div>
						</div>
						
						<div v-else class="color-999999">暂无数据</div>
					</div>
				</template>
			</el-table-column>
			
            <el-table-column label="课程分类" prop="classify"></el-table-column>
            <el-table-column label="讲课老师" prop="teacher" width="100" align="center"></el-table-column>
			
			<el-table-column label="课程章节数量" width="110" align="center">
				<template slot-scope="props">
					<div>
						<span>共</span>
						<span class="color-ff0000 mar-l-5 mar-r-5">{{props.row.chapter}}</span>
						<span>章</span>
					</div>
				</template>
			</el-table-column>
			
			<el-table-column label="总课时" width="110" align="center">
				<template slot-scope="props">
					<div>
						<span>共</span>
						<span class="color-ff0000 mar-l-5 mar-r-5">{{props.row.classHour}}</span>
						<span>课时</span>
					</div>
				</template>
			</el-table-column>
			
			<el-table-column label="是否收费" width="80" align="center">
			    <template slot-scope="props">
			        <div v-if="props.row.isFree === 0" class="color-1f8a24">收费课程</div>
			        <div v-else class="color-333333">免费课程</div>
			    </template>
			</el-table-column>
			
			<el-table-column label="原价(元)" width="80" align="center">
			    <template slot-scope="props">
			        <div class="color-999999">￥{{props.row.initPrice}}</div>
			    </template>
			</el-table-column>
			
			<el-table-column label="现价(元)" width="80" align="center">
			    <template slot-scope="props">
			        <div class="color-ff0000">￥{{parseFloat(props.row.price) !== 0 ? props.row.price : "0.00"}}</div>
			    </template>
			</el-table-column>
			
			<el-table-column label="购买人数" width="100" align="center">
				<template slot-scope="props">
					<div>
						<span class="color-ff0000 mar-r-5">{{props.row.studyCount}}</span>
						<span class="color-333333">人</span>
					</div>
				</template>
			</el-table-column>

            <el-table-column label="课程状态" width="80" align="center">
                <template slot-scope="props">
                    <div v-if="props.row.status === 0" class="color-1f8a24">已上架</div>
                    <div v-else class="color-333333">未上架</div>
                </template>
            </el-table-column>
			
			<el-table-column label="老师简介" prop="teacherDesc" width="300">
				<template slot-scope="props">
					<div>
						<div v-if="props.row.teacherDesc !== null && props.row.teacherDesc !== ''">
							<div v-if="props.row.teacherDesc.length < 20">{{props.row.teacherDesc}}</div>
							
							<div v-else>
								<el-tooltip class="item" effect="dark" :content="props.row.teacherDesc" placement="top-start">
									<span>{{props.row.teacherDesc.substr(0, 20) + "..."}}</span>
								</el-tooltip>
							</div>
						</div>
						
						<div v-else class="color-999999">暂无简介</div>
					</div>
				</template>
			</el-table-column>
			
            <el-table-column label="备注" prop="remark" width="200">
                <template slot-scope="props">
                	<div>
                		<div v-if="props.row.remark !== null && props.row.remark !== ''">
                			<div v-if="props.row.remark.length < 12">{{props.row.remark}}</div>
                			
                			<div v-else>
                				<el-tooltip class="item" effect="dark" :content="props.row.remark" placement="top-start">
                					<span>{{props.row.remark.substr(0, 12) + "..."}}</span>
                				</el-tooltip>
                			</div>
                		</div>
                		
                		<div v-else class="color-999999">暂无备注</div>
                	</div>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="240">
                <template slot-scope="props">
                    <div>
                        <el-button type="text" style="color: #006cff;" @click="showUpdateCourse(props.row)">编辑</el-button>
						<el-button type="text" style="color: #1f8a24;" @click="addChapter(props.row)">添加章</el-button>
                        <el-button type="text" style="color: #c87070;" v-if="props.row.status === 0" @click="offShelf(props.row)">下架</el-button>
						<el-button type="text" style="color: #1f8a24;" v-else @click.stop="putShelf(props.row)">上架</el-button>
                        <el-button type="text" style="color: #ff0000;" @click.stop="delCourse(props.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="flex justify-center mar-t-20">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pages.currentPage"
                :page-sizes="pages.pageSizes"
                :page-size="pages.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pages.total">
            </el-pagination>
        </div>

        <!-- 添加课程弹窗 -->
        <el-drawer :title="update.isUpdate ? '编辑课程' : '添加课程'" :visible.sync="update.show" :direction="update.direction" size="600px" :before-close="closeUpdateCourse">
            <div style="overflow-x: auto;height: 90vh;">
                <div class="mar-l-20 mar-r-20">
                    <div class="mar-b-20">
						<h5 class="mar-b-10 color-006cff">上传课程 Banner 图：</h5>
						
						<div class="flex">
							<div class="mar-r-20" v-if="update.form.mainUrl !== null && update.form.mainUrl !== ''">
								<div>
								    <img :src="update.form.mainUrl" class="w-90 mar-x-auto" style="margin: 0" />
								</div>
								
								<div class="mar-t-10">
									<el-button type="danger" size="mini" icon="el-icon-close">删除此图</el-button>
								</div>
							</div>
							
							<el-upload ref="courseUpload" v-if="update.form.mainUrl === ''"
								:action="update.action"
								:limit="1"
								:auto-upload="false">
								<div slot="trigger" style="width: 275px;height: 170px;background: #f8f8f8;border: 1px #e6e6e6 solid;border-radius: 5px;">
									<div class="w-100 text-center">
										<i class="el-icon-plus font-b-800 font-large color-333333 dis-block mar-t-40"></i>
										
										<div class="mar-t-10">
											<span class="font-14 color-333333">上传 Banner</span>
											<span class="font-14 color-ff0000">（不得超过300Kb）</span>
										</div>
									</div>
								</div>
							</el-upload>
						</div>
					</div>
					
					<el-form :model="update.form" label-width="auto" :inline="true">
						<el-form-item label="课程名称">
							<el-input v-model="update.form.courseName" placeholder="请输入课程名称" size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="课程分类">
							<el-select v-model="update.form.classifyId" placeholder="请选择分类" size="small" clearable filterable style="width: 184px;">
								<el-option v-for="(item, index) in update.form.classifyList" :key="index" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="讲课老师">
							<el-input v-model="update.form.teacher" placeholder="请输入讲课老师姓名" size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="章节数量">
							<el-input v-model="update.form.chapterCount" placeholder="请输入章节数量" size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="总课时">
							<el-input v-model="update.form.classHourCount" placeholder="请输入总课时" size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="是否收费">
							<el-radio v-model="update.form.radio" label="0">免费</el-radio>
							<el-radio v-model="update.form.radio" label="1">收费</el-radio>
						</el-form-item>
						
						<el-form-item label="原价">
							<el-input v-model="update.form.originalPrice" placeholder="请输入原价" size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="现价">
							<el-input v-model="update.form.price" placeholder="请输入现价" size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="购买人数">
							<el-input v-model="update.form.buyerCount" disabled size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="课程状态">
							<el-input v-model="update.form.statusText" disabled size="small"></el-input>
						</el-form-item>
						
						<el-form-item label="老师简介">
							<el-input type="textarea" v-model="update.form.teacherDesc" placeholder="请输入讲课老师简介" rows="4" size="small" maxlength="200" show-word-limit style="width: 446px;"></el-input>
						</el-form-item>
						
						<el-form-item label="备注">
							<el-input type="textarea" v-model="update.form.remark" placeholder="请输入备注" rows="4" size="small" maxlength="200" show-word-limit style="width: 450px;"></el-input>
						</el-form-item>
					</el-form>
                </div>
				
				<div style="margin: 0 0 40px 90px;">
					<el-button size="mini" @click="closeUpdateCourse()">关 闭</el-button>
					<el-button type="warning" size="mini" @click="resetCourseDetail()">重 置</el-button>
					<el-button type="danger" size="mini">提 交</el-button>
				</div>
			</div>
        </el-drawer>
    </div>
</template>

<script>
import { comfirmPopUp, popUpMsg } from "@/utils/util.js";

export default {
    name: "MyCourse",
    data () {
        return {
            // 筛选条件
            screen: {
                classifyList: [],
                form: {
                    courseName: "",
                    teacher: "",
                    classifyId: ""
                }
            },

            // 表格
            tableData: [],
			
			// 加载动画
			tableLoading: false,

            // 分页
            pages: {
                currentPage: 1,
                pageSize: 10,
                pageSizes: [10, 20, 50, 100],
                total: 1
            },

            // 添加课程弹窗
            update: {
				isUpdate: false,
				row: {},
                show: false,
                direction: "rtl",
				action: "",
				form: {
					mainUrl: "",
					courseName: "",// 课程名称
					classifyId: "",// 课程分类id
					classifyList: [],// 课程分类
					teacher: "",// 老师姓名
					chapterCount: null,// 章节
					classHourCount: null,// 总课时
					radio: "0",// 是否免费
					originalPrice: null,// 原价
					price: null,// 现价
					buyerCount: 0,// 购买人数
					statusText: "未上架",// 课程状态：是否上架
					teacherDesc: "",// 老师简介
					remark: "",// 备注
				}
            }
        }
    },

    methods: {
        // 查询课程列表
        findCourseList () {
            let data = [
                {
                    id: 1,
                    courseName: "java 全栈开发/零基础",
                    teacher: "大山老师",
                    classify: "后端开发",
					classifyId: 1,
                    mainUrl: require("../../../assets/images/course_001.jpg"),
                    teacherDesc: "大山老师，五年Java开发经验，曾担任企鹅公司的技术主管，有着丰富的教学经验。",
                    status: 0,
					studyCount: 112,
					chapter: 12,
					classHour: 110,
                    remark: "这门课是拿来测试用的，可以删除",
					isFree: 0,
					initPrice: "89.00",
					price: "59.00",
                }, {
                    id: 2,
                    courseName: "java 全栈开发/零基础",
                    teacher: "二宝老师",
                    classify: "设计",
					classifyId: 2,
                    mainUrl: require("../../../assets/images/course_001.jpg"),
                    teacherDesc: "二宝老师，五年CAD设计经验，曾担任**企业的设计总监，有着丰富的教学经验。",
                    status: 1,
					studyCount: 112,
					chapter: 3,
					classHour: 9,
                    remark: "",
					isFree: 1,
					initPrice: "89.00",
					price: "0.00",
                }
            ];
			
			this.tableLoading = true;
            setTimeout(() => {
				this.tableLoading = false;
				this.tableData = data;
			}, 1000)
        },

        // pageSize 改变时的回调
        handleSizeChange (val) {
            this.pages.pageSize = val;
            this.findCourseList();
        },

        // currentPage 改变时的回调
        handleCurrentChange (val) {
            this.pages.currentPage = val;
            this.findCourseList();
        },

        // 删除课程
        delCourse (row) {
            // console.log(row)
            comfirmPopUp("warning", `您确定要删除 "${row.courseName}" 这门课程吗？`, "删除课程", () => {
                popUpMsg("success", "删除成功！", 2000);
            }, () => {
                console.log("取消删除课程！");
            })
        },

        // 下架
        offShelf (row) {
            comfirmPopUp("warning", `您确定要下架 "${row.courseName}" 这门课程吗？`, "下架课程", () => {
				row.status = 1;
                popUpMsg("success", "下架成功！", 2000);
            }, () => {
                console.log("取消下架课程！");
            })
        },

        // 批量下架
        batchOffShelf () {
            let selection = this.$refs.table.selection;
            let len = selection.length;

            if (len === 0) {
                popUpMsg("warning", "请选择要下架得课程！", 3000);
                return;
            }

            comfirmPopUp("warning", `您确定要批量下架这些课程吗？`, "批量下架课程", () => {
                popUpMsg("success", "下架成功！", 2000);
            }, () => {
                console.log("取消批量下架课程！");
            })
        },
		
		// 上架
		putShelf (row) {
			row.status = 0;
			popUpMsg("success", "上架成功！", 2000);
		},
		
		// 显示添加课程弹窗
		showUpdateCourse (row) {
			if (row) {
				this.update.row = row;
				this.update.isUpdate = true;
				this.renderCourseInfo(row);
			}
			
			this.update.show = true;
		},
		
		// 编辑课程的时候渲染当前课程的信息
		renderCourseInfo (row) {
			this.update.form.mainUrl = row.mainUrl;
			this.update.form.courseName = row.courseName;
			this.update.form.classifyId = row.classifyId;
			this.update.form.teacher = row.teacher;
			this.update.form.chapterCount = row.chapter;
			this.update.form.classHourCount = row.classHour;
			this.update.form.radio = row.isFree.toString();
			this.update.form.originalPrice = row.initPrice;
			this.update.form.price = row.price;
			this.update.form.buyerCount = row.studyCount;
			this.update.form.statusText = row.status === 0 ? "未上架" : "已上架";
			this.update.form.teacherDesc = row.teacherDesc;
			this.update.form.remark = row.remark;
		},
		
		// 重置
		resetCourseDetail () {
			this.update.form.mainUrl = "";
			this.update.form.courseName = "";
			this.update.form.classifyId = "";
			this.update.form.teacher = "";
			this.update.form.chapterCount = null;
			this.update.form.classHourCount = null;
			this.update.form.radio = "0";
			this.update.form.originalPrice = null;
			this.update.form.price = null;
			this.update.form.buyerCount = 0;
			this.update.form.statusText = "未上架";
			this.update.form.teacherDesc = "";
			this.update.form.remark = "";
		},
		
		// 关闭添加课程弹窗
		closeUpdateCourse () {
			this.update.isUpdate = false;
			this.update.row = {};
			this.update.form.classifyList = [];
			this.resetCourseDetail();
			this.update.show = false;
		},
    
		// 添加章
		addChapter (row) {
			let obj = {
					name: "AddChapter",
					title: "添加章节",
					actived: true,
					router: "/AddChapter",
					meta: {
						keepAlive: true
					}
				};
			
			this.$store.commit("addTag", obj);
			this.$store.commit("cache", obj);// 缓存路由
			this.$router.push({
				path: "/AddChapter"
			})
		},
	},

    created () {
        this.findCourseList();
    }
}
</script>
